<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <script src="./lib/vue.js" charset="utf-8"></script>
  <body>
     <div class="box">

        <ul>
          <li v-for="(score,idx) in scores">
            {{idx + ":" +  score}}
          </li>
        </ul>
        <hr>

        <ul>
          <li v-for="(value,key) in person">
            {{key + ":" + value}}
          </li>
        </ul>

        <hr>

        <ul>
          <li v-for="n in name">
            {{n}}
          </li>
        </ul>

        <hr>

        <ul>
          <li v-for="p in phone">
            {{p}}
          </li>
        </ul>

        <hr>

        <table>
          <thead>
            <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>

          </tr>

          </thead>

          <tbody>
            <tr v-for="(s,idx) in students">
             <td>{{idx}}</td>
             <td>{{s.name}}</td>
             <td>{{s.age}}</td>
             <td>{{s.gender}}</td>
           </tr>

          </tbody>


        </table>


     </div>

  </body>

  <script type="text/javascript">
      let vm = new Vue({
        el:'.box',
        data:{
          scores:[80,70,67],
          person:{name:'fangyukui',age:17,gender:'male'},
          name:'fangyukui',
          phone:'13560050110',
          students:[
             {name:'fangyukui',age:17,gender:'male'},
             {name:'mingGe',age:23,gender:'male'},
             {name:'xiaohui',age:17,gender:'female'}

          ]
        }
      });

  </script>
</html>
